<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加站点</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script type="text/javascript" src="/ztree/js/jquery-1.4.4.min.js"></script>
    <link rel="stylesheet" href="/ztree/css/demo.css" type="text/css">
    <link rel="stylesheet" href="/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <script type="text/javascript" src="/ztree/api/apiCss/jquery.ztree.core.js"></script>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <script src="/js/layui/layui.all.js"></script>
    <script src="/admin/js/token.js"></script>

</head>

<body>
<style type="text/css">

    .ztree li span.button.icon01_ico_docu {
        background: url(js/zTree-zTree_v3-master/zTree_v3/css/zTreeStyle/img/index.png);
        margin-right: 2px;
        background-position: -110px -16px;
        vertical-align: top;
        no-repeat: scroll 0 0 transparent;
        vertical-align: top;
        *vertical-align: middle
    }

    .ztree li span.button.icon01_ico_open, .ztree li span.button.icon01_ico_close {
        background: url(js/zTree-zTree_v3-master/zTree_v3/css/zTreeStyle/img/index.png);
        margin-right: 2px;
        background-position: -110px -16px;
        vertical-align: top;
        no-repeat: scroll 0 0 transparent;
        vertical-align: top;
        *vertical-align: middle
    }

    .formbox {
        height: 1px;
    }

    body {
        background-color: white;
    }

    .layui-form-label {
        width: 100px;
    }

    .layui-input-block {
        margin-left: 130px;
    }
</style>
<div class="layui-row">
    <div class="layui-col-md2  formbox ">
    </div>

    <div class="layui-fluid layui-col-md8 layui-col-sm12 ">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 15px;" class="layui-row">
                <form class="layui-form" lay-filter="component-form-group">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color:red">*</span>站点名称</label>
                        <div class="layui-input-block">
                            <input name="stationName" class="layui-input" autocomplete="off"
                                   lay-verify="required|stationName"
                                   id="stationName">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color:red">*</span>站点类型</label>
                        <div class="layui-input-block">
                            <select name="stationtype" lay-filter="aihao" id="stationType"
                                    lay-verify="required|stationtype">
                                <option value="">选择站点类型</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color:red">*</span>所属用户</label>
                        <div class="layui-input-block">
                            <input name="suoshuyonghu" class="layui-input " autocomplete="off"
                                   lay-verify="required|suoshuyonghu"
                                   id="admin" readonly="readonly">
                            <div id="boos"
                                 style="display:none;position: absolute;z-index: 100;">
                                <ul id="treeDemo" class="ztree"
                                    style="height: 160px;background: white;border:1px solid gray;overflow-y: scroll"></ul>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color:red">*</span>地址</label>
                        <div class=" layui-input-inline">
                            <select name="quyu" id="quyu" lay-filter="demo" lay-verify="required|quyu">
                                <option value="">选择地区</option>
                            </select>
                        </div>

                        <div class="layui-input-inline">
                            <select name="sheng" id="sheng" lay-verify="required|sheng">
                                <option value="">选择省</option>
                            </select>
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color:red">*</span>详细地址</label>
                        <div class="layui-input-block">
                            <input name="xiangxidizhi" class="layui-input" autocomplete="off"
                                   lay-verify="required|xiangxidizhi"
                                   id="xiangxidizhi">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color:red">*</span>联系电话</label>
                        <div class="layui-input-block">
                            <input name="phone" class="layui-input" type="tel" autocomplete="off"
                                   lay-verify="required|phone"
                                   id="phone">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">点播服务器IP</label>
                        <div class="layui-input-block">
                            <input name="dianbofuwuqiIp" class="layui-input" autocomplete="off" id="dianbofuwuqiIp">
                        </div>
                    </div>

                    <div class="layui-form-item ">
                        <label class="layui-form-label">VNP地址</label>
                        <div class="layui-input-block">
                            <input name="VPN" class="layui-input" autocomplete="off" id="VPN">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">点钟包IP地址</label>
                        <div class="layui-input-block">
                            <input name="dianzhongbao" class="layui-input" autocomplete="off" id="dianzhongbao">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color:red">*</span>最大终端数</label>
                        <div class="layui-input-block">
                            <input name="maxzhongduanshu" class="layui-input" autocomplete="off"
                                   lay-verify="required|maxzhongduanshu" id="maxzhongduanshu" type="number">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color:red">*</span>站点模式</label>
                        <div class="layui-input-block">
                            <select name="stationmoshi" lay-filter="aihao" id="stationMoshi"
                                    lay-verify="required|stationmoshi">
                                <option value="买断">买断模式</option>
                                <option value="租赁">租赁模式</option>
                            </select>
                        </div>
                    </div>


                    <div class="layui-form-item layui-layout-admin">
                        <div class="layui-input-block">
                            <div class="layui-footer" style="left: 0;">
                                <button class="layui-btn" lay-filter="demo1" lay-submit style="margin-left:100px"
                                        lay-submit="">添加
                                </button>
                                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-col-md2 formbox">

    </div>
</div>
<script>
        var form = layui.form;
        var zTreeObj
        var a = null;
        var element = layui.element;
        var aid = '';
        //最大终端数验证
        form.verify({
            maxzhongduanshu: [
                /^[+]{0,1}(\d+)$/ //正则表达式
                , '最大终端数只能为正整数' //提示信息
            ]
        });
        var setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: 'id',
                    pIdKey: 'pid',
                    rootPId: '0'
                }
            }
            ,
            callback: {
                onMouseDown: itemMouseDown //单击事件
            }
        }

        function itemMouseDown(event, treeId, treeNode) {
            $('#admin').val(treeNode ? treeNode.name : $('#admin').val())
            aid = treeNode ? treeNode.id : aid
        }

        $.ajax({
            type: 'get',
            url: '/admin/selectShujsonById?adminidnow=1',
            async: true,
            data:{
              token:layui.data('local_store').token
            },
            success: function (msg) {
                $j = jQuery.noConflict();
                var treeNodes = eval(eval(msg).data);
                zTreeObj = $j.fn.zTree.init($j("#treeDemo"), setting, treeNodes);
                $ = layui.$;
            }
        })
        $(function () {
            $('#admin').click(function (event) {
                event.stopImmediatePropagation();//取消事件冒泡；
                $("#boos").toggle('slow');
            });
            $(document).bind("click", function (e) {
                var target = $(e.target);
                if (target.closest("#admin,#boos").length == 0) {/*.closest()沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止，返回包含零个或一个元素的 jQuery 对象。*/
                    $("#boos").fadeOut();
                }
                ;
                e.stopPropagation();
            })
        });

        //查站点类型
        $.ajax({
            type: 'get',
            url: '/admin/station-type/AllStationType',
            async: true,
            success: function (res) {
                for (var i = 0; i < res.data.length; i++) {
                    $('#stationType').append(new Option(res.data[i].stationTypeName, res.data[i].stationTypeId))
                }
                layui.form.render('select')
            }
        })
        //查区域
        $.ajax({
            type: 'get',
            url: '/admin/region/SelectregionAll',
            async: true,
            success: function (res) {
                for (var i = 0; i < res.data.length; i++) {
                    $('#quyu').append(new Option(res.data[i].regionName, res.data[i].regionId))
                }
                layui.form.render('select')
            }
        })
        //根据区域id查省
        form.on('select(demo)', function (data) {
            $.ajax({
                type: 'get',
                url: '/admin/province/selprovince',
                data: {
                    Code: $('#quyu').val()
                },
                async: true,
                success: function (res) {
                    $('#sheng').empty()
                    for (var i = 0; i < res.data.length; i++) {
                        $('#sheng').append(new Option(res.data[i].provinceName, res.data[i].provinceCode))
                    }
                    layui.form.render('select')
                }
            })
        })
        //提交的监听事件
        form.on('submit(demo1)', function () {
            $.ajax({
                type: 'get',
                url: '/admin/station/addstation',
                dataType: 'json',
                data: {
                    stationName: $('#stationName').val(),
                    stationType: $('#stationType').val(),
                    stationMaximumNumberOfTerminals: $('#maxzhongduanshu').val(),
                    stationDzbIp: $('#dianzhongbao').val(),
                    stationModel: $('#stationMoshi').val(),
                    stationArea: $('#quyu').val(),
                    stationProvince: $('#sheng').val(),
                    stationVpn: $('#VPN').val(),
                    stationPhone: $('#phone').val(),
                    address: $('#xiangxidizhi').val(),
                    stationAdminId: aid,
                    stationLocalServerIp: $('#dianbofuwuqiIp').val()
                },
                success: function (res) {
                    switch (res.code) {
                        case 200:
                            layer.msg('新增成功', {
                                icon: 1
                            });
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                parent.location.reload();
                                parent.layer.close(index);    //关闭弹出层
                            }, 1000)
                            break
                        case 400:
                            layer.msg(res.data, {
                                icon: 2
                            })
                            break
                        case 500:
                            layer.msg(res.data, {
                                icon: 2
                            })
                            break
                    }
                },
                error: function () {
                    layer.msg('网络原因新增失败', {
                        icon: 2
                    })
                }
            })
            return false
        })
</script>
</body>
</html>
